<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<link rel="stylesheet" href="css/popUpWindow.css" type="text/css" media="screen" />
	<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script>
	<script type="text/javascript">
		var isOpen = false;
		function popUpCenter(title,content){
			isOpen = true;
			var o = $(".popUpContainer");
			$(".popUpTitleContent").html("");
			$(".popUpContent").html("");
			$(".popUpTitleContent").html(title);
			$(".popUpContent").html(content);
			
			//o.addClass("popUpWindow");
			/**
				1、窗口宽：document.body.clientWidth
				2、div的宽度：o.css("width")
					.css("width")取得的是css属性中的宽度。
					.width()取得的是元素的width属性。
					IE中使用.width()去不到css中设置的宽度，firefox则可以
				3、$('.popUpWindowBg').css('filter', 'alpha(opacity=40)');
					设置ie的透明度，此项写在css文件中没有效果。firefox则没问题。
			*/
			o.css({"left":parseInt(document.body.clientWidth)/2 - parseInt(o.css("width").substring(0,o.css("width").length -2))/2 + "px","top":parseInt(window.screen.availHeight)/2 - parseInt(o.css("width").substring(0,o.css("height").length -2))/2 - 50 + "px"});
			o.show();
			$('.popUpWindowBg').css('filter', 'alpha(opacity=40)');// IE8 USE
			$('.popUpWindowBg').show();
		}
		$(document).ready(function(){
			$(".closeWindow").click(function(){
				closeWindow();
			});
			$(".popButton").click(function(){
				closeWindow();
			});
			/**
			$(".popUpWindowBg").click(function(){
				$('.popUpWindow').fadeOut(180);
				$('.popUpWindowBg').fadeOut(180);
			});
			*/
			$(".popUpContainer").draggable({
				handle:".popUpTitle"
			});
		});
		function closeWindow(){//关闭窗口
			isOpen = false;
			$('.popUpContainer').fadeOut(180);
			$('.popUpWindowBg').fadeOut(180);
		}
		function test(){
			var postData = "";
			$(".popUpInput").each(function(){
				postData +=this.name + "@" + this.value+ ",";
			});
			alert(postData);
		}
	</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	this is test<br/>
	<button onclick="popUpCenter();">测试</button>
	<iframe id="d" src="a1.html" frameborder="0"></iframe>
	<div class="popUpContainer" style="display: none;width: 350px;height: 420px;">
		<div class="popUpWindow">
			<div class="closeWindow" >　
			</div>
			<div class="popUpTitle">
				<div class="popUpTitleContent">标题标题</div>
			</div>
			<div class="popUpContent">
				内容内容内容
				<p>d</p>
				<p>d</p>
				<p>d</p>
			</div>
			<div class="popUpFoot">
				<button class="popButton">关闭窗口</button>
			</div>
		</div>
	</div>
	<div class="popUpWindowBg"></div>
</body>
</html>